<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.axios拦截器</title>
</head>
<body>
<button id="btn">发送请求</button>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript">
    axios.defaults.baseURL="http://127.0.0.1/axios";
    $("#btn").click(()=>{
        //请求拦截器(在请求发到服务器之前的处理) config对象封装了来自浏览器的请求
        // 要return config服务器才能接收到前端的请求
        axios.interceptors.request.use(
            config=>{
             config.headers.token ="ncvsdjknvcdskjvb";
                return config;
        },
            error=>{
                console.log(error)
            }
        );


        /*响应拦截器 将服务器发送的数据封装到response对象中
        * 拦截器在响应成功时要将response进行return这样浏览器才能接收到服务器端的数据
        * */
        axios.interceptors.response.use(
            response =>{
                let child={
                    gender:"boy"
                }
              response.data.user=child;
                return response;
            },
            error => {
                console.log(error);

            }
        )

       axios.get("/get",{params:{username:"Alice"}})
        .then(
            value => {
                console.log(value.data);
            },
            reason => {
                console.log(reason);
            }
        )
    })
</script>
</body>
</html>